// pages/center/center.js

import request from "../../utils/request";


// 记录拖拽的手指初始位置
let startY = 0;

Page({

    /**
     * 页面的初始数据
     */
    data: {
        //被拖拽元素（个人中心中部）的位置
        translateY: "0rpx",
        //定义一个动态动画效果，在每次按下重新开始拖拽的时候，通过动画过渡的方式进行复位，并且把 transition 的值清空，保证只有在复位元素时才有动画效果
        transition: "",
        //定义一个用户信息数据，存储用户信息的部分数据
        userInfo: {
            userId: "",
            nickname: "",
            avatarUrl: ""
        },
        //定义用户播放记录的数据
        records: []
    },

    /**
       * 实现拖拽移动的效果
       */
    // 手指按下的回调
    touchStartHandler(e) {
        // console.log(e);
        // 获取手指按下的位置，并保存到 startY 中;
        // e.touches[0].clientY => 手指距离屏幕顶端的位置
        startY = e.touches[0].clientY
        //手指按下时清空动画效果
        this.setData({
            transition: ""
        })
    },
    // 手指移动的回调
    touchMoveHanler(e) {
        // 根据元素的初始位置 和 手指移动的距离 去计算 translateY 值
        // 手指移动的距离 = 当前手指的位置 - 手指初始位置startY
        let disY = e.touches[0].clientY - startY
        // 因为在当前效果中，每一次拖拽的元素初始 translateY 都为 0，所以在这里直接把 disY 赋值给 translateY
        this.setData({
            translateY: disY + "rpx"
        })
    },
    // 手指抬起的回调
    touchEndHanler() {
        //手指抬起时，复位元素位置并开启动画过渡效果
        this.setData({
            translateY: "0rpx",
            transition: "transform 1s"
        })
    },

    //点击头像前往登录页
    goToLogin() {
        // * wx.navigateTo()
        //  *  1、不能跳转到 tabbar 页面
        //  *  2、保留当前页面（会产生历史记录），后续可以从目标页面进行返回（可以使用 navigateBack() 返回，也可以通过左上角的返回箭头返回）
        //  *  3、页面栈
        //  *      页面访问历史记录实现（栈），每次页面的访问跳转会进入到历史记录中，也就是进栈操作，返回操作其实就是从栈中取出最近一次页面
        // if (this.data.userInfo.userId === "") {
        //     //判断用户信息中的用户id是否有值，如果没有则表示未登录，如果有则表示登录过了
        //     wx.navigateTo({
        //         url: '/pages/login/login',
        //     })
        // } else {
        //     //登录过的提示
        //     wx.showToast({
        //         title: '你已经登录了',
        //         icon: "error"
        //     })
        // }
        wx.navigateTo({
            url: '/pages/login/login',
        })

        // redirectTo 不会把跳转之前的 center 页面压入到历史记录中
        // wx.redirectTo({
        //     url: '/pages/login/login'
        // })

        // wx.reLaunch() 
        // 也不会记录跳转之前的页面
        // 与 redirectTo 不同的是，redirectTo 只是不记录这次跳转之前页面，以前的历史记录是存在的，reLaunch 会把之前所有历史记录清空
    },

    // 从 storage 中获取用户相关信息
    getUserInfo() {
        // 从 storage 中获取登录成功的用户信息
        const userInfo = wx.getStorageSync('userInfo_key')
        //如果有用户信息则进行赋值
        if (userInfo) {
            this.setData({
                userInfo: {
                    userId: userInfo.userId,
                    nickname: userInfo.nickname,
                    avatarUrl: userInfo.avatarUrl
                }
            })
        }
    },

    //获取用户的播放历史记录
    async getHistoryRecords() {
        //先确定用户已经登录了，再发送请求
        if (this.data.userInfo.userId) {
            try {
                const res = await request({
                    url: "/user/record",
                    data: {
                        uid: this.data.userInfo.userId,
                        type: 0
                    }
                })
                // console.log(res);
                if (res.data.code === 200) {
                    this.setData({
                        records: res.data.allData.map(item => item.song)
                    })
                }
            } catch (error) {
                // console.log(error);
                wx.showToast({
                    title: '请求出错！',
                    icon: "error"
                })
            }
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getUserInfo()
        this.getHistoryRecords()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})